<template>
  <div class="change">
    <div class="operation">
      <div>编辑</div>
      <div>
        <span @click="save">保存</span>
        <span @click="jump">返回</span>
      </div>
    </div>
    <div class="inputbox">
      <div>
        姓 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 名：<input
          type="text"
          placeholder="请输入姓名"
          v-model="a.name"
        />
      </div>
      <div>
        联系方式：<input
          type="text"
          placeholder="请输入电话"
          v-model="a.phone"
        />
      </div>
      <div>毕业学校：<input type="text" v-model="a.school" /></div>
      <div>
        学 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 历：<input
          type="text"
          v-model="a.education"
        />
      </div>
      <div>应聘岗位：<input type="text" v-model="a.job" /></div>
      <div>信息来源：<input type="text" v-model="a.from" /></div>
      <div>电子邮件：<input type="text" v-model="a.email" /></div>
      <div class="experience">个人履历：</div>
      <div class="bottom">
        <el-table :data="bottomList" border style="width: 100%">
          <el-table-column prop="date" label="工作时间" width="180" />
          <el-table-column prop="jobaddress" label="工作单位" width="180" />
          <el-table-column prop="job" label="职位" />
          <el-table-column prop="jobcont" label="主要内容" />
          <el-table-column prop="money" label="薪资" />
          <el-table-column prop="reason" label="离职原因" />
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import axios from "axios";
import { reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
var route = useRoute();
var router = useRouter();
var a = ref([]);
a.value = route.query;
var bottomList = ref([]);
var obj = ref([
  {
    date: a.value.jobTime,
    jobaddress: a.value.jobaddress,
    job: a.value.job,
    jobcont: a.value.jobcont,
    money: a.value.money,
    reason: a.value.reason,
  },
]);
bottomList.value = obj.value;
//修改
var save = () => {
  axios
    .post("/api/user/change", {
      id: a.value.id,
      Num: a.value.Num,
      name: a.value.name,
      job: a.value.job,
      phone: a.value.phone,
      from: a.value.from,
      status: a.value.status,
      peopleStatus: a.value.peopleStatus,
      school: a.value.school,
      education: a.value.education,
      email: a.value.email,
      jobTime: a.value.jobTime,
      jobaddress: a.value.jobaddress,
      jobcont: a.value.jobcont,
      money: a.value.money,
      reason: a.value.reason,
    })
    .then((res) => {
      alert("保存成功");
      router.push("/index/goodPerson");
    });
};

var jump = () => {
  router.push("/index/goodPerson");
};
</script>

<style scoped>
.operation {
  height: 50px;
  background-color: #f5f5f5;
  display: flex;
  justify-content: space-between;
}
.operation > div:nth-child(1) {
  line-height: 50px;
  margin-left: 20px;
  font-size: 12px;
}
.operation > div:nth-child(2) {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.operation > div > span {
  line-height: 30px;
  font-size: 12px;
  width: 60px;
  height: 30px;
  background-color: white;
  color: #63b9be;
  margin-right: 20px;
  text-align: center;
  cursor: pointer;
}
.operation > div > span:hover {
  background-color: #63b9be;
  color: white;
}
.inputbox {
  padding: 20px 0 20px 100px;
  font-size: 12px;
  color: #999999;
}
input {
  margin: 0 5px;
  margin: 15px 0;
  width: 307px;
  height: 40px;
  box-shadow: none;
  border: 1px solid #999999;
}
.box {
  display: flex;
  justify-content: center;
}
.bottom {
  margin: 30px 20px;
}
.experience {
  margin: 10px 0px;
}
</style>